<template>
   <div style="background: #F7F7F7">
        <div style="width: 92%;margin: auto;background: #fff;margin-top: 0.3rem;padding-bottom: 0.2rem">



            <mt-cell title="提现至" is-link style="text-indent: 0.1rem;">
              <span style="color: #F97B43;font-size: 0.28rem">中国建设银行储蓄卡(1211)</span>
            </mt-cell>
          <div class="xia">
            <p style="width: 100%;height: 0.02rem;background: #EDEDED"></p>
            <p class="p1">提现金额</p>

            <!--金额-->
            <div class="money">
              <p>¥</p>
              <input type="text" value="300.00">
              <p class="x"></p>
            </div>

            <div class="ti">
              <p>可提现余额¥2000.00</p>
              <p>全部提现</p>
            </div>

          </div>


        </div>

     <van-button type="info" class="but" @click="btn()">确认提现</van-button>

     <van-popup v-model="show"  position="top">
        <div style="background: #000;opacity: 0.7;overflow: hidden;width: 100%;height: 100%">
          <div class="pop">
            <div class="tan">
              <p>请输入提现密码</p>
              <p></p>
              <p>提现金额</p>
              <p>
                <span>¥</span>
                <span>300.00</span>
              </p>

              <van-password-input :value="value" @focus="showKeyboard = true" style="margin-top: 0.3rem;border: 0.01rem solid #90CAFF;"/>
            </div>

          </div>
        </div>
     </van-popup>
     <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false"/>
   </div>
</template>

<script>
  import { Dialog } from 'vant';
    export default {
        name: "Tixian",
      data(){
          return{
            show: false,
            value: '',
            showKeyboard: false
          }
      },
      methods:{
        btn(){
          this.show = true;
          this.value = '';
        },
        onInput(key) {
          this.value = (this.value + key).slice(0, 6);
          if (this.value.length == 6){
            this.show = false;
            this.showKeyboard= false;
          }
        },
        onDelete() {
          this.value = this.value.slice(0, this.value.length - 1);
        }
      },
      mounted(){
        Dialog.confirm({
          title: '提醒',
          message: '去设置提现密码'
        }).then(() => {
          this.$router.push({
            path:'/smima'
          })
        }).catch(() => {
          // on cancel
        });
      }
    }
</script>

<style scoped>
  .van-number-keyboard{
    z-index: 9999!important;
  }
  .tan{
    width: 92%;
    margin: auto;
    overflow: hidden;
  }
  .tan P:nth-child(1){
    margin-top: 0.5rem;
    font-size: 0.36rem;
    color: #333;
    font-weight: bold;
    text-align: center;
  }
  .tan p:nth-child(2){
    width: 100%;
    height: 0.01rem;
    background: #EDEDED;
    margin-top: 0.3rem;
  }
  .tan p:nth-child(3){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    text-align: center;
    margin-top: 0.3rem;
  }
  .tan p:nth-child(4){
    text-align: center;
    margin-top: 0.2rem;
  }
  .tan p:nth-child(4) span:nth-child(1){
    font-size: 0.4rem;
    color: #333333;
  }
  .tan p:nth-child(4) span:nth-child(2){
    font-size: 0.6rem;
    color: #333333;
  }
  .pop{
    width: 6.9rem;
    margin: auto;
    background: #fff;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  .p1{
    font-size:0.3rem;
    color:rgba(51,51,51,1);
    margin-top: 0.4rem;
  }
  .xia{
    width: 92%;
    margin: auto;
  }
  .xia:after{
    content: '';
    display: block;
    clear: both;
  }
  .money{
    width: 100%;
    margin-top: 0.3rem;
  }
  .money p{
    display: inline-block;
    font-size: 0.4rem;
    color: #333;
    font-weight: bold;
  }
  .money input{
    width: 80%;
    margin-left: 0.1rem;
    font-size: 0.6rem;
    color: #333;
    font-weight: bold;
  }
  .x{
    width: 100%;
    height: 0.01rem;
    margin-top: 0.4rem;
    background: #EDEDED;
  }
  .ti{
    margin-top: 0.3rem;
    width: 100%;
  }
  .ti p:nth-child(1){
    font-size:0.26rem;
    color:rgba(153,153,153,1);
    float: left;
  }
  .ti p:nth-child(2){
    font-size:0.26rem;
    color:rgba(2,135,255,1);
    float: right;
  }
  .but{
    width: 100%;
    height: 0.88rem;
    background:rgba(2,135,255,1);
    font-size:0.36rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
    position: absolute;
    bottom: 0;
  }
</style>
